<template>
	<div class="welcome-container">
		<div class="welcome-header">
			<img src="@/assets/logo.png" width="120" alt="Clean Admin Logo" />
			<h1>欢迎来到Clean Admin</h1>
			<p>这是一个简洁、高效的后台管理系统。</p>
		</div>
		<div class="welcome-content">
			<div class="intro-section">
				<h2>关于系统</h2>
				<p>Clean Admin 提供了现代化的界面和强大的功能，帮助您轻松管理网站内容。</p>
			</div>
			<div class="action-section">
				<RouterLink :to="{ path: '/admin/login' }">
					<a-button type="primary">后台登录</a-button>
				</RouterLink>
			</div>
		</div>
	</div>
</template>

<script setup>

</script>

<style scoped lang="scss">
@charset "UTF-8";

// 修改背景动画的关键帧
@keyframes backgroundAnimation {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.welcome-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	text-align: center;
	// 修改背景为多色渐变，并应用动画
	background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
	background-size: 400% 400%;
	animation: backgroundAnimation 15s ease infinite;
}

.welcome-header {
	margin-bottom: 20px;
}

.welcome-header h1 {
	font-size: 2.5em;
	color: #333;
}

.welcome-header p {
	font-size: 1.2em;
	color: #666;
}

.welcome-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.intro-section {
	margin-bottom: 20px;
}

.intro-section h2 {
	font-size: 1.8em;
	color: #333;
}

.intro-section p {
	font-size: 1em;
	color: #666;
}

.action-section .ant-btn {
	display: inline-flex;
	align-items: center;
	font-size: 1em;
	padding: 10px 20px;
}
</style>
